<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="41px"
      >
        <el-form-item label="姓名" prop="studentName">
          <el-input
            v-model="queryParams.studentName"
            size="mini"
            clearable
            placeholder="学生姓名"
            @keyup.enter.native="handleQuery"
          >
          </el-input>
        </el-form-item>
  
        <el-form-item label="时间">
          <el-date-picker
            v-model="queryParams.dateList"
            size="small"
            style="width: 380px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
          />
        </el-form-item>
        <el-form-item label="设备" prop="deviceNames">
          <el-select v-model="queryParams.deviceNames" placeholder="请选择设备" clearable multiple size="small" style="width: 240px">
            <el-option v-for="item in deviceList" :key="item.deviceName" :label="item.deviceName" :value="item.deviceName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="进出类型" prop="type" label-width="68px">
          <el-select v-model="queryParams.type" placeholder="请选择" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卡类型" prop="type" label-width="55px">
          <el-select v-model="queryParams.studentType" placeholder="请选择" clearable>
            <el-option
              v-for="item in studentTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="班级" prop="classId">
          <api-select :api="findSchoolClassPageList"
                      id="id"
                      name="className"
                      :params="{pageSize: 500, pageNum: 1, status: 1, isGraduation: 0}"
                      :value.sync="queryParams.classId"
                      placeholder="请选择班级"
                      clearable filterable/>
        </el-form-item> -->
        <!-- <el-form-item label="住宿类型" prop="classId" label-width="68px">
          <dict-select dict-type="student_dormitory_type"
                      :value.sync="queryParams.studentDormitoryType"
                      placeholder="请选择住宿类型"
                      clearable/>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            size="warning"
            type="mini"
            icon="el-icon-download"
            @click="exportTrajectory"
          >
            导出
          </el-button>
          <el-button
            size="danger"
            type="mini"
            icon="el-icon-refresh"
            @click="refreshData"
          >
            {{refreshText}}
          </el-button>
        </el-form-item>
      </el-form>
  
      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button size="warning" type="mini" icon="el-icon-download"  @click="exportTrajectory">
            导出
          </el-button>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="17">
          <el-table v-loading="loading" :data="list" highlight-current-row
      @current-change="handleCurrentChange" style="width: 100%" ref="table">
        <!-- <el-table-column label="照片" align="center" prop="snap_ftp_url">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.snapFtpUrl"
              style="width: 100px; height: 100px"
              :preview-src-list="[scope.row.snapFtpUrl]"
            >
            </el-image>
          </template>
        </el-table-column> -->
        <el-table-column
          label="人员ID"
          align="center"
          prop="studentId"
          :show-overflow-tooltip="true"
          width="100"
        />
        <el-table-column
          label="学生姓名"
          align="center"
          prop="cardName"
          :show-overflow-tooltip="true"
          width="100"
        />
        <el-table-column label="班级" align="center" prop="className" />
        <el-table-column label="卡类型" align="center" prop="studentType" />
        <el-table-column label="刷脸设备" align="center" prop="deviceAddr" />
        <el-table-column label="刷脸时间" align="center" prop="faceTime" />
        <el-table-column label="类型" align="center" prop="type">
          <template slot-scope="scope">
            <label v-if="scope.row.type == 1" style="color: #52c41a">进入校园</label>
            <label v-if="scope.row.type == 2" style="color: #00FA9A">离开校园</label>
            <label v-if="scope.row.type == 3">宿舍打卡</label>
  
            <label v-if="scope.row.type == 4" style="color: #FF7F50">未对应规则</label>
  
            <el-popover
              v-if="scope.row.type == 5 || scope.row.type == 6"
              placement="top-start"
              title="请假时段"
              trigger="hover"
              :content="scope.row.attach || '获取请假时段失败'">
              <label v-if="scope.row.type == 5" slot="reference" style="color: #faad14">进入校园(请假)</label>
              <label v-if="scope.row.type == 6" slot="reference" style="color: #FF8C00">离开校园(请假)</label>
            </el-popover>
  
            <label v-if="scope.row.type == 7" style="color: #FF6347">进入校园(迟到)</label>
          </template>
        </el-table-column>
        <!-- <el-table-column label="寝室" align="center" prop="dormitoryInfo">
          <template slot-scope="scope">
            <span v-if="scope.row.dormitoryStatus == null">
              {{scope.row.dormitoryInfo}}
            </span>
            <el-tag v-if="scope.row.dormitoryStatus != null" :type="scope.row.dormitoryStatus === 1 ? 'success' : 'warning'"> {{scope.row.dormitoryInfo}}</el-tag>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
        </el-col>
        <el-col :span="1">
          &nbsp;
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{bigImage.studentName}}({{ bigImage.className }})</span>
              <span style="float: right; padding: 3px 0">
                <label v-if="bigImage.type == 1" style="color: #52c41a">进入校园</label>
                <label v-if="bigImage.type == 2" style="color: #00FA9A">离开校园</label>
                <label v-if="bigImage.type == 3">宿舍打卡</label>
                <label v-if="bigImage.type == 4" style="color: #FF7F50">未对应规则</label>
                <label v-if="bigImage.type == 5" slot="reference" style="color: #faad14">进入校园(请假)</label>
                <label v-if="bigImage.type == 6" slot="reference" style="color: #FF8C00">离开校园(请假)</label>
                <label v-if="bigImage.type == 7" style="color: #FF6347">进入校园(迟到)</label>
              </span>
              <span style="width: 40%; float: right;">
                <el-switch
                  style="display: block"
                  v-model="bigImageType"
                  active-value="default"
                  inactive-value="cut"
                  active-color="#13ce66"
                  inactive-color="#2979ff"
                  active-text="远"
                  inactive-text="近"/>
              </span>
  
            </div>
            <el-image :src="bigImageType === 'cut' ? bigImage.cutSnapFtpUrl : bigImage.snapFtpUrl" :preview-src-list="[bigImage.snapFtpUrl,bigImage.cutSnapFtpUrl]" ></el-image>
          </el-card>
        </el-col>
      </el-row>
  
    </div>
  </template>
    <script>
  import { findOpenDoorRecordPage } from "@/api/smartdor/openDoorRecord";
  export default {
    name: "trajectory",
    data() {
      return {
        refreshText:"轮询更新",
        refreshStatus:false,
        bigImage:{},
        bigImageType: 'default',
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 表格数据
        list: [],
        deviceList: [],
        client : null,
        currentType: null,
        currentStudentType: null,
        currentDeviceNames: [],
        queryParams: {
          studentType: null, //学生类型
          pageNum: 1, //页码
          pageSize: 10, //每页大小
          dateList: [],
          classId: null,
          queryDormitoryInfo: true,
          studentDormitoryType: null
        },
        studentTypes: [
          {
            value: "1",
            label: "学生",
          },
          {
            value: "2",
            label: "教职工",
          },
          {
            value: "3",
            label: "家属",
          },
        ],
        options: [
          {
            value: "1",
            label: "进入校园",
          },
          {
            value: "2",
            label: "离开校园",
          },
          {
            value: "3",
            label: "宿舍打卡",
          },
          {
            value: "4",
            label: "未对应规则",
          },
          {
            value: "5",
            label: "请假(离校)",
          },
        ],
      };
    },
    created() {
      //进来使用SSE链接推送
    //   this.initPush();
      var curDate = new Date();
      this.queryParams.dateList = [
        this.parseTime(new Date(curDate.getTime() - 186400 * 1000)),
        this.parseTime(new Date()),
      ];
    //   this.getDeviceList();
      this.getList();
      // this.setTimer()
    },
    beforeDestroy(){
      this.refreshStatus = false
      console.log("离开页面")
    },
    destroyed() {
      console.log("destroy============>")
      this.destroyPush();
    },
    methods: {
      refreshData(){
        if(this.refreshStatus){
          // 轮询更新开启中 将关闭论更新 所有按钮重命名为开启更新
          this.refreshStatus = false
          this.refreshText = "开启更新"
        }else{
          this.destroyPush();
          this.refreshStatus = true
          this.refreshText = "停止更新"
          this.setTimer()
        }
      },
    //   getDeviceList() {
    //     findDevicePage({pageNum: 1, pageSize: 10000}).then(res => {
    //       this.deviceList = res.data.records;
    //     });
    //   },
      destroyPush() {
        if(this.client){
          console.log("开始关闭推送更新");
          this.client.stopReceive();
          console.log("推送更新已关闭");
        }
      },
    //   initPush(){
    //     let client = new PushClient();
    //     this.client = client;
    //     client.onmessage = (e) => {
    //       let pushInfo = JSON.parse(e.data);
    //       if(this.currentStudentType && pushInfo.studentType !== this.currentStudentType){
    //         return;
    //       }
    //       if(this.currentType && pushInfo.type !== this.currentType){
    //         return;
    //       }
    //       if(this.currentDeviceNames.length > 0 && !this.currentDeviceNames.includes(pushInfo.deviceAddr)){
    //         return;
    //       }
    //       this.list.unshift(pushInfo);
    //       this.bigImage = this.list[0];
    //       this.$refs.table.setCurrentRow();
    //       while(this.list.length>this.queryParams.pageSize){
    //         this.list.pop();
    //       }
    //     }
    //     client.startReceive({messageType:"ASYNC_GATE_ACCESS_MESSAGE"});
    //   },
      setTimer () {
        if(this.refreshStatus==false){
          return
        }
        let timer
        this.resetQuery()
        timer = setTimeout(() => {
              this.setTimer()
  
          }, 3000)
        },
      handleCurrentChange(row){
        this.bigImage = row
      },
      changeTime(val) {
        console.log(val);
      },
      resetQuery() {
        var curDate = new Date();
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          dateList: [
            this.parseTime(new Date(curDate.getTime() - 186400 * 1000)),
            this.parseTime(new Date()),
          ],
          queryDormitoryInfo: true
        };
        this.getList();
      },
  
      /** 查询门禁流水列表 */
      getList() {
        // this.loading = true;
        if (this.queryParams.dateList.length > 0) {
          this.queryParams.beginTime = this.queryParams.dateList[0];
          this.queryParams.endTime = this.queryParams.dateList[1];
        } else {
          this.queryParams.beginTime = null;
          this.queryParams.endTime = null;
        }
        findOpenDoorRecordPage(this.queryParams).then((res) => {
          this.currentStudentType = this.queryParams.studentType;
          this.currentType = this.queryParams.type;
          if(this.queryParams.deviceNames){
            if(this.queryParams.deviceNames.length===0){
              this.currentDeviceNames = [];
            }else {
              this.queryParams.deviceNames.forEach(item => this.currentDeviceNames.push(item));
            }
          }
          this.list = res.data.list;
          if(this.list.length>0){
            this.bigImage = this.list[0]
          }
          this.total = res.data.total;
          // this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.pageNum = 1;
        this.getList();
      },
  
      exportTrajectory() {
        if (this.queryParams.dateList.length > 0) {
          this.queryParams.beginTime = this.queryParams.dateList[0];
          this.queryParams.endTime = this.queryParams.dateList[1];
        } else {
          this.queryParams.beginTime = null;
          this.queryParams.endTime = null;
        }
        exportTrajectory(this.queryParams).then((resp) => {
          this.fileDownload(resp.data, "学生出入记录.xlsx");
        });
      },
    },
  };
  </script>
  
  